<template>
    <div class="header">
      <div class="nav">
        <div class="left">
           <span>所在城市：</span>
           <Zicity v-model="cityInfo" class="select-city" @input="chooseAddress"></Zicity>
         </div>
        <div class="right">
          <span>
            <router-link to="/login">{{txt2}}</router-link>
            <span class="fen">|</span>
          </span>
          <span @click="tuichu()">
            <router-link to="/">退出</router-link>
            <span class="fen">|</span>
          </span>
          <span v-for="item in data">
            <router-link :to="item.to">{{item.txt}}</router-link>
            <span class="fen">|</span>
          </span>
          <router-link to="/">
            <span>
            <img src="/static/lyl/pone.png" alt="">
            <span>400-800-8820</span>
          </span>
          </router-link>
        </div>
      </div>
    </div>
</template>

<script>
  import Zicity from './Zicity'
    export default {
      name: "Nav",
      components:{
        Zicity
      },
      data(){
        return {
          cityInfo:[],
          data:[
            {to:'/',txt:'我的订单'},
            {to:'/',txt:'我的消息'},
            {to:'/',txt:'我是商家'},
            ]
        }
      },
      computed:{
        txt2(){
          return this.$store.state.iphone;
        }
      },
      mounted(){
        //this.txt2 = this.$store.state.iphone;
        //console.log(this.txt2);
      },
      methods: {
        // info 为子组件传递过来的参数
        chooseAddress(info) {
          this.cityInfo = info
        },
        tuichu(){
          this.$store.commit('showIphone2');
          this.$store.commit('showPhone2');
          this.txt2 = this.$store.state.iphone;
        }
      }
    }
</script>

<style scoped>
  .header{
    background: #eee;
  }
  .header .nav{
    width: 1280px;
    margin: auto;
    height: 35px;
  }
  .header .nav .left:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
  }
  .header .nav .left{
    zoom:1;
    float: left;
    width: 510px;
    height: 35px;
    line-height: 35px;
  }

  .header .nav .left span{
    color: #727272;
    font-size: 14px;
    float: left;
  }

  .header .nav:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
  }
  .header .nav{
    zoom: 1;
  }
  .header .nav .right{
    float: right;
    width: 640px;
    height: 35px;
    line-height: 35px;
    text-align: right;
  }
  .header .nav .right span{
    font-size: 14px;
  }
  .header .nav .right img{
    width: 16px;
    vertical-align: middle;
  }
  .header .nav .right .fen{
    margin: 0 13px;
  }
</style>
